<template>
  <page-body :bgImg="ossDomain + '/daily-index/dailyIndex-bg.png'" safeAreaLeft>
    <view class="pages font-B ">
      <nav-bar title='每日指数' :backBtn='false' titleColor='#fff'>
        <view slot="left" class="jh-flex-center" style="width: 50px;height: 50px;" @tap="back()">
          <image style="width: 9px;height: 16px;display: block;" :src="ossDomain + '/icon-bg3.png'"></image>
        </view>
      </nav-bar>
      <view class="jh-flex-center" style="width: 100%;height: calc(100vh - 50px);">
        <view class="dailyIndex">
          <image class="dailyIndex-bg" :src="ossDomain + '/daily-index/dailyIndex-bg2.png'" mode="scaleToFill"></image>
          <view class="jh-column jh-space-between jh-align-center" style="height: 100%;position: relative;z-index: 2;">
            <view class="dailyIndex-list jh-flex-center">
              <view class="padding-10" v-for="(i,index) in list1" :key='index'>
                <view class="dailyIndex-list-main">
                  <image class="dailyIndex-list-bg" :src="ossDomain + '/daily-index/dailyIndex-item'+i.id+'.png'"></image>
                  <view class="dailyIndex-list-text1 font-B c-fff font-22 jh-line-height jh-ellipsis">
                    {{i.value || ''}}
                  </view>
                  <view class="dailyIndex-list-text2 font-R c-fff font-8 jh-line-height jh-ellipsis">
                    {{i.subTitle || ''}}
                  </view>
                </view>
                <view class="font-8 c-fff jh-flex-center font-R padding-t10">{{i.title || ''}}</view>
              </view>
            </view>
            <view class="dailyIndex-list jh-flex-center">
              <view class="padding-10" v-for="(i,index) in list2" :key='index'>
                <view class="dailyIndex-list-main">
                  <image class="dailyIndex-list-bg" :src="ossDomain + '/daily-index/dailyIndex-item'+i.id+'.png'"></image>
                  <view class="dailyIndex-list-text1 font-B c-fff font-22 jh-line-height jh-ellipsis">
                    {{i.value || ''}}
                  </view>
                  <view class="dailyIndex-list-text2 font-R c-fff font-8 jh-line-height jh-ellipsis">
                    {{i.subTitle || ''}}
                  </view>
                </view>
                <view class="font-8 c-fff jh-flex-center font-R padding-t10">{{i.title || ''}}</view>
              </view>
            </view>
            <view class="jh-align-center jh-space-between ">
              <image class="padding-10" style="width: 9px;height: 16px;display: block;transform: scale(.8);" :src="ossDomain + '/icon-bg3.png'"></image>
              <view class="font-13 c-fff padding-l10 padding-r10">2021-09-20</view>
              <image class="padding-10" style="width: 9px;height: 16px;display: block;transform: rotate(180deg) scale(.8);" :src="ossDomain + '/icon-bg3.png'"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
        list1: [
          {
            id: '1',
            title: '睡眠心率',
            subTitle: '每分钟',
            value: '89'
          },
          {
            id: '2',
            title: '睡眠清醒',
            subTitle: '次',
            value: '1'
          },
          {
            id: '3',
            title: '睡眠呼吸率',
            subTitle: '次/分',
            value: '15'
          },
          {
            id: '4',
            title: '睡眠体动',
            subTitle: '次',
            value: '108'
          }
        ],
        list2: [
          {
            id: '5',
            title: '深睡比例',
            subTitle: ' ',
            value: '15%'
          },
          {
            id: '6',
            title: '浅睡比例',
            subTitle: ' ',
            value: '64%'
          },
          {
            id: '7',
            title: 'RCM比例',
            subTitle: ' ',
            value: '21%'
          },
          {
            id: '8',
            title: '呼吸暂停',
            subTitle: '次',
            value: '68'
          },
          {
            id: '9',
            title: '葡萄糖',
            subTitle: 'mmo1/L',
            value: '4.0'
          }
        ]
      }
    },
    methods: {
      back () {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding:0 30px;
    box-sizing: border-box;
  }
  .dailyIndex {
    width: 100%;
    height: calc(100% - 30px);
    position: relative;
    &-bg{
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      z-index: 1;
    }
    &-list{
      
      &-bg{
        width: 82px;
        height: 82px;
        display: block;
      }
      &-main{
        position: relative;
      }
      &-text1{
        max-width: 60px;
        position: absolute;
        top: 27px;
        left: 50%;
        transform: translateX(-50%);
      }
      &-text2{
        max-width: 60px;
        position: absolute;
        top: 49px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
</style>
